<template>
  <div>
    <el-collapse-transition>
      <a-card style="margin: 20px">
        <span>
          编号：
          <el-input size="mini" style="width: 150px; margin-right: 20px" />
          标题：
          <el-input
            size="mini"
            style="width: 150px; margin-right: 20px"
            allow-clear
          />
        </span>
        <a-button style="margin-left: 10px" icon="search" />
        <a-button style="margin-left: 10px" icon="sync" @click="fetch" />
      </a-card>
    </el-collapse-transition>

    <a-table
      style="margin: 20px; background: #fff"
      rowKey="uuid"
      :columns="columns"
      :data-source="rawData"
      :loading="loadding"
    >
      <span slot="action" slot-scope="record">
        <a-button size="small" type="primary"  @click="onreportDown(record)"> 下载 </a-button>
        |
        <a-popconfirm
          title="确认删除？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="onDelete(record)"
          @cancel="() => {}"
        >
          <a-button type="danger" size="small"> 删除 </a-button>
        </a-popconfirm>
      </span>
    </a-table>
  </div>
</template>

<script>
import { BACKEND_URL, METADATA_CONFIG, URL_MAP } from "@/config/config";
import Moment from "@/utils/moment.zh_cn";
import { deleteJSON, getData } from "@/utils/http";
import { downLoadByUrl } from "@/utils/utils";
import { mapGetters } from "vuex";
// mapGetters
export default {
  data() {
    return {
      columns: [],
      data: [],
      loadding: false,
      rawData: [],
    };
  },
  computed: {
    ...mapGetters(["token"]),
  },
  methods: {
    loadRaw() {
      let r = [];
      let p = this.data.map(
        (v) =>
          new Promise((resolve, reject) => {
            getData(URL_MAP.LOG_DETAIL, {
              uuid: v.uuid,
            })
              .then((res) => {
                if (res.code === 0) {
                  r.push(res.data);
                }
              })
              .catch(console.log)
              .finally(resolve);
          })
      );
      Promise.all(p).then((v) => {
        this.rawData = r.map((vv) => {
          vv["submittime"] = Moment(vv["submitTime"]).format("lll");
          return vv;
        });
      });
      //   console.log(this.rawData);
    },
    async fetch() {
      this.loadding = true;
      try {
        let params = {};
        // getData
        // URL_MAP
        params.templateType = METADATA_CONFIG.REPORT;
        let data = await getData(URL_MAP.LOG_LIST, params);
        // console.log(data);
        data = data.data;

        this.data = data.data;
        this.loadRaw();
      } catch (e) {
        console.log(e);
      } finally {
        this.loadding = false;
      }
    },
    onDelete(record) {
      this.loadding = true;
      //   deleteJSON
      deleteJSON(URL_MAP.POST_LOG, {
        uuid: record.uuid,
      })
        .then((res) => {
          if (res.code === 0) {
            this.$message.success("删除成功");
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((e) => {
          console.log(e);
          this.$message.error("删除失败！");
        })
        .finally(() => {
          this.loadding = false;
          this.fetch();
        });
    },
    onDownload(obj) {
      console.log(obj)
      downLoadByUrl(obj.values.uri[0].url, this.token, obj.values.title);
    },
    onreportDown(r) {
      // BACKEND_URL
      downLoadByUrl(BACKEND_URL + URL_MAP.WORD_DOWNLOAD + "?uuid="+r.uuid, this.token, r.uuid+".docx")
    },
  },
  mounted() {
    this.columns = [
      {
        dataIndex: "uuid",
        key: "uuid",
        title: "报告编码",
      },
      {
        dataIndex: "submittime",
        key: "submittime",
        title: "提交时间",
      },
      {
        dataIndex: "values.title",
        key: "title",
        title: "标题",
      },
      {
        key: "action",
        title: "下载",
        scopedSlots: { customRender: "action" },
      },
    ];
    this.fetch();
  },
};
</script>

<style>
</style>